iT邦幫忙

2021 iThome 鐵人賽

DAY 7
0

Hello, 各位 iT邦幫忙 的粉絲們大家好~~~

本篇是 Re: 從零開始用 Xamarin 技術來複刻過去開發的一個 App: TopStore 系列文的 EP7。

在上一篇 EP6 當中我們已經在 PeoplePage 當中設計了一個 ListView,再來的話我們要在針對 ListView 裡面作一些設計跟項目的呈現資訊。
PeoplePageViewModel 的 Command 設計

而在 PeoplePage 當中的 ListView 其 ItemsSource 所繫結到的物件對象是設計為 ObservableCollection<Person> 的 People,所以這也就代表著在 ListView 當中呈現的項目是要根據 People 裡面的每一項 Person 所規劃設計的類別屬性,來進行資料呈現的繫結。

來來來,開始囉~~~


在今天這回的 EP 當中 這個資料的內容當然我們就會先用假資料,也就是先寫死在程式碼當中的一個資料,以利後續讓畫面跟資料的一個擷取處理呈現上面是可以完成的。

當這樣的一個完成之後,後續還有很多事情,比如說可能我們在資料的處理上面,可能包括要把它儲存到一個永久的 Storage 裡面去...等等的,不過,那就之後有談到的機會再說吧^_<

我們就先從 Models 資料夾找到今天的配角 Person 這個類別,並且來幫它增加四個屬性 Name、Tel、Email、Address。
Person 類別的修改

暫時利用自動屬性這樣完成設計之後,就可以先用來撰寫 ListView 的資料繫結的部分,但因為之後還可能會針對 Person 的資料直接跟 "編輯" 或 "新增" 的頁面作繫結的處理,所以它還會再作一些修正,不過就到時候再修正吧!

接著回到 PeoplePage.xmal 之後找到 ListView 的標記,並且先修改成完整的對稱式標記。
ListVeiw 標記的修改 1

並且開始再其中增加 ListView.ItemTemplate 標記之後再繼續增加 DataTemplate 的標記。
ListVeiw 標記的修改 2

完成之後,我們可以在這邊思考一下是否有需要用到額外已經設計好的 ViewCell 樣板,很有可能在這個專案裡面有類似的 ViewCell 要呈現在不同頁面的 ListView 或其他的多資料呈現元件。不過在這邊,我們畢竟是 "Re: 從零..." 系列文,所以就直接在這邊設計下去吧,鳩咪^_<

寫上 ViewCell 標記後,在腦海裡大概想像了一下之後想要呈現的項目樣式。
VeiwCell 當中的版型規劃 1

這邊的 ViewCell 當中的版型規劃就透過 Grid ,看起來會是比較快速簡便的方式來切劃。
VeiwCell 當中的版型規劃 2

那接著就動手來編纂相關的 XAML 標記,來...三步驟,握...折...搭啦~~~
VeiwCell 版型透過 Grid 的規劃
完成!

接著再繼續來編纂 ViewCell 內部要呈現的相關控制項,並且配合 Grid 的版型設計來完成所放置的位置。

第一個為 Label 標記,來...三步驟,握...折...搭啦~~~
ViewCell 內部要呈現的相關控制項 1
Good~~~

第二個為 Label 標記,來...三步驟,握...折...搭啦~~~
ViewCell 內部要呈現的相關控制項 2
Awesome~~~

第三個為 Label 標記,來...三步驟,握...折...搭啦~~~
ViewCell 內部要呈現的相關控制項 3
Perfet~~~

第四個為 Button 標記,來...三步驟,握...折...搭啦~~~
ViewCell 內部要呈現的相關控制項 4
Wonderful~~~

以上這四個控制項的前三個 Label 控制項,其標記的撰寫都會將 Text 屬性,透過 Binding (繫結)的方式來完成資料的設定。可能各位會問到說 Button 怎麼沒有繫結到電話的資料?

這裡並不需要顯示電話的資訊來顯示,就沒有需要在這邊處理繫結的動作,反倒是需要一篇專門的 EP 來介紹這個部分。(想先睹為快的話請跳到 EP15)

完成 PeoplePage 的 XAML 編纂之後,接著我們就到 PeoplePageViewModel 當中來透過 Constructor 建立預設的 People 的假資料(MockData)。
People 的假資料 1
Tab 兩下
People 的假資料 2
new 出新滋味 ObservableCollection<Person> 的物件設定給 People 屬性。
People 的假資料 3
來...三步驟,握...折...搭啦~~~
People 的假資料 4

這邊只是為了能夠在 PeoplePage 的畫面呈現時,在 LiveView 當中能有資料的呈現出來,所以不要太在意當中的資料產生的方式。當然可以規劃設計到專屬的 MockData 類別當中去,以防擾亂我們 ViewModel 程式中的邏輯理解,又或者是之後要抽換成透過永久儲存的方式來處理也比較方便,但在本 EP7 的部分我們就先不談這麼多了。

BTW, 如果嫌資料產生很麻煩,可以透過 Generatedata 這個網站來協助你產生假資料(雖然有 "中" 文...但你知道的,還是建議用英文):
https://generatedata3.com/

好的,都撰寫完成後我們就將專案重新建置 "Ctrl + F5"(執行但不偵錯) 到雙平台(iOS、Android)上跑看看,確認到目前為止所變更的效果如何。
雙平台(iOS、Android)上執行呈現的效果

所以當今天畫面雙平台(iOS、Android) 呈現的效果完成時,我們回頭來檢視 PeoplePage 裡的 ListView 每個項目所呈現的效果是否符合前面所提及的版型規劃。

首先各位可以看到在第一個 Row 當中的兩個 Label 所呈現的寬度比例大約是 2:3,這個沒有問題。
ListView 每個項目所呈現的效果檢視 1

再來可以看到在第二個 Row 當中的 Label 所呈現的位置橫跨了兩個 Column,這個也沒有問題。
ListView 每個項目所呈現的效果檢視 2

再來可以看到在第三個 Column 當中的 Button 所呈現的位置縱跨了兩個 Row,這個也沒有問題。
ListView 每個項目所呈現的效果檢視 3

不過呢,由於 iOS 跟 Android 在原生 UI 控制項的一些處理上,對於我們設計 Button 所在 Grid 的 Column 將寬度設定 Auto 時,兩個平台對於 Button 呈現的解釋有所的不同,所以會看到在畫面上 iOS 在按鈕的呈現上比較怪異一些,然後感覺 Android 似乎比較正常,但這都是可以在後續的處理上去做畫面的調整。

這邊就先按照我們原先的設計規劃來結束這篇 EP7 吧,鳩咪^_<

甘溫各位~~~


上一篇
EP 6: Use self-define Code Snippet to improve Coding Experience for design Command in ViewModel
下一篇
EP 8: Build a MockData and Register Page Route to Shell
系列文
Re: 從零開始用 Xamarin 技術來復刻過去開發的一個 App : TopStore32
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言